<template>
  <el-container>
    <el-main>
      <el-table
          border
          :default-expand-all="false"
          :row-class-name="getRowClass"
          :data="tableData"
          height="600px"
          style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
              <el-table
                  max-height="600"
                  border
                  style="color: red;width: 1130px"
                  v-show="props.row.eventsList.length>0"
                  :data="props.row.eventsList.filter((data)=>  !search || (data.sqlText!==null && data.sqlText.toLowerCase().includes(search.toLowerCase())))"
                  row-key="threadId"
              >
                <el-table-column prop="eventID" label="事件ID" width="80px"/>
                <el-table-column prop="eventName" label="事件名" width="180px"/>
                <el-table-column prop="execTimeSec" label="事件执行时间/秒" width="80px"/>
                <el-table-column prop="lockTimeSec" label="锁执行时间/秒" width="80px"/>
                <el-table-column width="500px">
                  <template #header>
                    <label>SQL语句</label>
                    <el-input v-model="search" clearable size="medium" placeholder="请输入SQL语句" />
                  </template>
                  <template #default="props">
                    {{props.row.sqlText}}
                  </template>
                </el-table-column>
                <el-table-column prop="messageText" label="响应信息" width="200px"/>
              </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="threadId" label="线程ID" width="70px"/>
        <el-table-column prop="threadOSID" label="OS线程ID" width="70px"/>
        <el-table-column prop="parentThreadId" label="父线程ID" width="70px"/>
        <el-table-column prop="processlistId" label="连接ID" width="80px"/>
        <el-table-column prop="name" label="name" width="100px"/>
        <el-table-column prop="connectionType" label="连接类型" width="85"/>
        <el-table-column prop="processlistCommand" label="Client端执行命令类型" width="80"/>
        <el-table-column prop="processlistDB" label="访问数据库" width="120"/>
        <el-table-column prop="processlistHost" label="Client端主机名" width="85"/>
        <el-table-column prop="processlistInfo" label="正在执行的语句" width="220"/>
        <el-table-column prop="processlistState" label="正在执行的操作" />
        <el-table-column sortable prop="processlistTime" label="处于当前状态时间(秒)" width="100px"/>
      </el-table>

    </el-main>
  </el-container>
</template>

<script>
import {useStore} from 'vuex'
import {computed,ref} from "vue";
export default {
  name: "Connections",
  setup(){
    const store = useStore();
    store.commit('setToggleHead','users');

    const tableData = computed(()=>store.state.usersThread);

    let search = ref('');

    function getRowClass({row,rowIndex}){
      if(row.eventsList.length===0){
        return 'row-expand-cover';
      }else{
        return '';
      }
    }

    return{
        tableData,
        getRowClass,
        search
    }
  },
}
</script>
<style>
.row-expand-cover .el-table__expand-column .el-icon {
  /*无数据时隐藏展开图标，*bug:隐藏点击后 仍会弹出空白*/
  visibility:hidden;

}
</style>